<template>
<div class="wrap">
	<xcl-header :show="loading.show" :call-back="()=>{}" :page-title="pageTitle" :header-right="headerRight"></xcl-header>
	<div class="content">
		<div v-if="historyData.length === 0  && loading.show === false" >
	      <div class="no-data">暂无数据</div>
	    </div>
		<table class="table table-striped" v-else>
			<thead>
				<tr style="height:40px;line-height:40px;">
					<th width="28%" style="border:none;">净值日期</th>
					<th width="24%" style="border:none;">单位净值</th>
					<th width="24%" style="border:none;">累计净值</th>
					<th width="24%" style="border:none;">成立以来</th>
				</tr>
			</thead>
			<tr>
				<td>{{historyData.hts}}</td>
				<td>{{historyData.cn | formatNumber 4}}</td>
				<td>{{historyData.tn | formatNumber 4}}</td>
				<td>{{historyData.tr | formatPercent}}</td>
			</tr>
		</table>
	</div>
</div>
</template>
<script>
	import {getCheck,ERROR_DEFINE}  from '../libs/utils'
	import xclHeader from '../components/header.vue'
	let ProductProxy =  require("../proxy/product_proxy");
	let Product = new ProductProxy();
	export default {
		data(){
			return{
				scroll:true,
                pageTitle:'历史净值',
                productSid:this.$route.params.sid,
                historyData:[],
                loading:{
                    show:false,
                    showTxt:'数据加载中...'
                },
                searchKey:{
                    page:1,
                    limit:20
                }
                
			}
		},
		 route:{
            deactivate (transition){
                $('#content').off('scroll');
                transition.next();
            }
        },
		methods:{
			getHistoryData(){
				var _this=this;
				_this.loading.show=true;
				Product.getProductNetHistorys(this.productSid,this.searchKey.page,this.searchKey.limit,function(data){
					if(data.code === 200 && data.results && data.results.length){
						_this.historyData=data.results;
					}
					_this.loading.show=false;
				});
			},
			getScrollData (){
                if(this.scroll){
                    let $content=$('#content');
                    if ($content.height() + $content[0].scrollTop >= $content[0].scrollHeight - 10) {
                        this.scroll = false;
                        this.searchKey.page++;
                        this.getTopics();
                    }
                }
            }
		},
		ready(){
			this.getHistoryData();
			 $('#content').on('scroll', () => {
                this.getScrollData();
            });
		},
		components:{
           "xclHeader":xclHeader,
        }
	}
</script>
<style lang="stylus">
table {
  border-spacing: 0;
  border-collapse: collapse;
}
.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 0;
  background-color: #ffffff;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th {
  color: #333;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {  
  vertical-align: middle;
  text-align: center;
  font-weight: normal;
  word-break: break-all;
}
.table > thead > tr > th,
.table > tbody > tr > th {
  
  border-bottom: 1px solid #ddd;
}
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 0.2rem 0;
  border-right: 1px solid #dadada;
}
.table > thead > tr > td:last-child,
.table > tbody > tr > td:last-child,
.table > tfoot > tr > td:last-child {
  border-right: none;
}
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}
</style>